import React, { Component } from "react";
import "./dialog.scss";
import CodeMessage from "../../component/codeMessage/codeMessage";
import yhTools from "../../tools/yh";
let timeHandle;
class Dialog extends Component {
	//头部标题
	constructor(props) {
		super(props);
		this.agreeFlag = true;
		this.state = {
			agreeAble: false, //合同是否滚动到最底端
			codeNumber: "", //短信验证码
			codeCheck: true //验证码是否正确  true 正确 false 错误
		};
		this.moduleName = this.props.propsObj.dialog.moduleName;
	}
	componentWillReceiveProps() {}
	componentDidMount() {}
	componentWillUnmount() {
		this.hideAction();
	}

	//短信验证码弹窗的确认按钮
	successSmsAction(event) {
		yhTools.getStatisticsDatas(
			this.moduleName + "_VerifyConfirmButton_Click",
			this.props.propsObj
		);
		if (this.state.codeNumber.toString() == "") {
			this.setState({
				codeCheck: false
			});
			yhTools.toast("请输入短信验证码");
			return false;
		}
		let codeReg = /^[0-9A-Za-z]{4,6}$/;
		if (!codeReg.test(this.state.codeNumber.toString())) {
			this.setState({
				codeCheck: false
			});
			yhTools.toast("短信验证码输入有误");
			return false;
		}
		event.nativeEvent.stopImmediatePropagation();
		event.stopPropagation();
		clearTimeout(timeHandle);
		this.props.propsObj.dialog.success(this.state.codeNumber);
		if (this.props.propsObj.dialog.closeFlag) {
			//如果为true  不关闭弹窗
			return false;
		}
		this.hideAction();
	}
	//确定
	successAction(event) {
		event.nativeEvent.stopImmediatePropagation();
		event.stopPropagation();
		clearTimeout(timeHandle);
		this.props.propsObj.dialog.success();
		if (this.props.propsObj.dialog.closeFlag) {
			//如果为true  不关闭弹窗
			return false;
		}
		this.hideAction();
	}
	//取消
	failAction(event) {
		event.nativeEvent.stopImmediatePropagation();
		event.stopPropagation();
		clearTimeout(timeHandle);
		this.props.propsObj.dialog.fail();
		// if(this.props.propsObj.dialog.closeFlag){//如果为true  不关闭弹窗
		//     return false;
		// }

		this.hideAction();
	}
	failAgreeAction(event) {
		event.nativeEvent.stopImmediatePropagation();
		event.stopPropagation();
		clearTimeout(timeHandle);
		this.props.propsObj.dialog.fail();
		// if(this.props.propsObj.dialog.closeFlag){//如果为true  不关闭弹窗
		//     return false;
		// }

		this.hideAction();
	}
	//短信验证码弹框 取消按钮
	failMessageAction(event) {
		yhTools.getStatisticsDatas(
			this.moduleName + "_VerifyCancelButton_Click",
			this.props.propsObj
		);
		event.nativeEvent.stopImmediatePropagation();
		event.stopPropagation();
		clearTimeout(timeHandle);
		this.props.propsObj.dialog.fail();
		this.hideAction();
	}
	//遮罩层点击
	backClick() {
		if (this.props.propsObj.dialog.closeFlag) {
			//如果为true  不关闭弹窗
			return false;
		}
		if (this.props.propsObj.dialog.bgRemove) {
			this.hideAction();
		}
	}

	contentClick(event) {
		event.nativeEvent.stopImmediatePropagation();
		event.stopPropagation();
	}
	//合同添加滚动监听
	addListenerScroll() {
		//意思就是内容总体的高度 - 滚动条的偏移值  === 元素的高度(包含内边)但不包含外边距，边框，以及滚动条
		if (
			document.getElementById("contractBody").firstChild.clientHeight -
				(document.getElementById("contractBody").firstChild.scrollHeight -
					document.getElementById("contractBody").firstChild.scrollTop) >=
			-8
		) {
			this.setState({
				agreeAble: true
			});
			if (this.props.propsObj.dialog.bottomCallback && this.agreeFlag) {
				this.props.propsObj.dialog.bottomCallback();
			}
			this.agreeFlag = false;
		}
	}
	//根据弹窗类型渲染不同的VIEW
	renderType(type) {
		if (this.props.propsObj.dialog.time > 0) {
			timeHandle = setTimeout(() => {
				this.failAction();
			}, this.props.propsObj.dialog.time);
		}
		let _that = this;
		if (type == "contract") {
			setTimeout(() => {
				if (this.agreeFlag) {
					let contractBody = document.getElementById("contractBody").firstChild;
					if (contractBody.scrollHeight > contractBody.clientHeight) {
						//判断是否有垂直滚动条
						document.getElementById(
							"contractBody"
						).firstChild.onscroll = _that.addListenerScroll.bind(_that);
					} else {
						_that.agreeFlag = false;
						_that.setState({
							agreeAble: true
						});
					}
				} else {
					//解除绑定
					//document.getElementById('contractBody').removeEventListener('scroll',_that.addListenerScroll.bind(_that));
					document.getElementById(
						"contractBody"
					).firstChild.onscroll = () => {};
				}
			}, 200);
		}
		switch (type) {
			case "confirm":
				return this.viewConfirm();
			case "alert":
				return this.viewAlert();
			case "iconText":
				return this.viewIconText();
			case "contract":
				return this.viewContract();
			case "smsSend":
				return this.viewSms();
			default:
				return "";
		}
	}
	//合同的同意按钮
	agreeAction() {
		if (!this.state.agreeAble) {
			yhTools.toast("请阅读到底后再同意");
			return false;
		} else {
			clearTimeout(timeHandle);
			this.props.propsObj.dialog.success();
			this.hideAction();
		}
	}

	//弹窗消失
	hideAction() {
		this.props.propsObj.dialog.hide();
		//弹窗消失并且初始化
		this.props.propsObj._setDialog({
			show: false, //是否展示
			title: "", //弹窗标题
			type: "confirm", //弹窗类型 confirm/alert/iconText/contract
			content: "", //弹窗内容
			time: 0, //弹窗消失时间  单位 毫秒
			//width:'',//弹窗宽度
			//heigth:'',//弹窗高度
			bgRemove: false, //点击遮罩层是否移除弹窗
			success: () => {
				return true;
			}, //点击确定回调函数
			fail: () => {}, //点击取消回调函数
			hide: () => {}, //遮罩层消失回调函数
			successText: "继续", //确认框--确认按钮文案
			failText: "取消", //确认框--取消按钮文案
			okText: "知道了", //弹框--确定按钮文案
			addClass: "", //扩展class
			closeFlag: false, ////点击确认和取消是否关闭弹窗  true 不关闭弹窗 默认false 关闭弹窗
			moduleName: "" //模块名称
		});
	}
	//获取短信验证码的值
	codeCallback(value) {
		this.setState({
			codeNumber: value,
			codeCheck: true
		});
		if (this.props.propsObj.dialog.codeCallback) {
			this.props.propsObj.dialog.codeCallback(value);
		}
	}
	//确认框内容
	viewConfirm() {
		return (
			<div>
				<div className="dialog-header">{this.props.propsObj.dialog.title}</div>
				<div className="dialog-body">
					<div className="dialog-body-con">
						{this.props.propsObj.dialog.content}
					</div>
				</div>
				<div className="dialog-foot clear">
					<a
						className="btn-cancel btn-confrim"
						id="confirmCancelBtn"
						onClick={event => {
							this.failAction(event);
						}}
					>
						{this.props.propsObj.dialog.failText}
					</a>
					<a
						className="btn-ok btn-confrim"
						id="confirmOkBtn"
						onClick={event => {
							this.successAction(event);
						}}
					>
						{this.props.propsObj.dialog.successText}
					</a>
				</div>
			</div>
		);
	}
	//短信验证码框
	viewSms() {
		let codeMessageOption = {
			propsObj: this.props.propsObj,
			codeCallback: this.codeCallback.bind(this),
			type: "dialog",
			codeCheck: this.state.codeCheck,
			sendCallback: this.sendMessageCallback.bind(this),
			moduleName: this.moduleName
		};
		return (
			<div>
				<div className="dialog-header">{this.props.propsObj.dialog.title}</div>
				<div className="dialog-body">
					<div className="dialog-body-con">
						{this.props.propsObj.dialog.content}
						<CodeMessage codeMessageOption={codeMessageOption} />
					</div>
				</div>
				<div className="dialog-foot clear">
					<a
						className="btn-cancel btn-confrim"
						id="dialogSendMsgCancelBtn"
						onClick={event => {
							this.failMessageAction(event);
						}}
					>
						{this.props.propsObj.dialog.failText}
					</a>
					<a
						className="btn-ok btn-confrim"
						id="dialogSendMsgOkBtn"
						onClick={event => {
							this.successSmsAction(event);
						}}
					>
						{this.props.propsObj.dialog.successText}
					</a>
				</div>
			</div>
		);
	}
	//一个按钮的弹窗
	viewAlert() {
		return (
			<div>
				<div className="dialog-header">{this.props.propsObj.dialog.title}</div>
				<div className="dialog-body">{this.props.propsObj.dialog.content}</div>
				<div className="dialog-foot">
					<button
						className="btn-alert-ok"
						id="alertOkBtn"
						onClick={event => {
							this.successAction(event);
						}}
					>
						{this.props.propsObj.dialog.okText}
					</button>
				</div>
			</div>
		);
	}
	//列表（图标文字） 一个关闭按钮
	viewIconText() {
		return (
			<div>
				<div className="dialog-icon-text-header">
					{this.props.propsObj.dialog.title}
				</div>
				<div className="dialog-body icon-text-body">
					{this.props.propsObj.dialog.content}
				</div>
				<div className="dialog-icon-text-foot">
					<a
						className="btn-icon-text-close"
						id="dialogCloseBtn"
						onClick={event => {
							this.successAction(event);
						}}
					>
						关闭
					</a>
				</div>
			</div>
		);
	}
	//合同 可滚动 两个按钮
	viewContract() {
		return (
			<div>
				<div className="dialog-body contract-body">
					<div className="contract-content" id="contractBody">
						{this.props.propsObj.dialog.content}
					</div>
				</div>
				<div className="dialog-foot clear">
					<a
						className="btn-cancel btn-confrim"
						id="dialogContractCancelBtn"
						onClick={event => {
							this.failAgreeAction(event);
						}}
					>
						{this.props.propsObj.dialog.failText}
					</a>
					<a
						className={
							this.state.agreeAble ? "btn-disabled btn-ok" : "btn-disabled"
						}
						id="dialogContractOkBtn"
						onClick={event => {
							this.agreeAction(event);
						}}
					>
						{this.props.propsObj.dialog.successText}
					</a>
				</div>
			</div>
		);
	}

	sendMessageCallback() {
		this.props.propsObj._setDialog({
			type: "smsSend"
		});
	}

	render() {
		let content = "";
		let bodyClass = "dialog-content";
		if (!this.props.propsObj.dialog.show) {
			bodyClass = bodyClass + " dialog-hide";
		}
		if (this.props.propsObj.dialog.addClass != "") {
			bodyClass = bodyClass + " " + this.props.propsObj.dialog.addClass;
		}
		if (this.props.propsObj.dialog.type == "sms") {
			//短信验证码弹窗
			let codeMessageOptionS = {
				propsObj: this.props.propsObj,
				codeCallback: () => {},
				type: "dialog",
				sendCallback: this.sendMessageCallback.bind(this)
			};
			let seconds = sessionStorage.getItem("codeMessageSeconds");
			if (sessionStorage.getItem("codeMessageSeconds")) {
				if (seconds == 0 || seconds == 60) {
					sessionStorage.removeItem("codeMessageSeconds");
					bodyClass = bodyClass + " dialog-hide";
					content = <CodeMessage codeMessageOption={codeMessageOptionS} />;
				} else {
					content = (
						<div
							className="dialog-con"
							id="dialogEle"
							onClick={event => {
								this.contentClick(event);
							}}
						>
							{this.renderType("smsSend")}
						</div>
					);
				}
			} else {
				bodyClass = bodyClass + " dialog-hide";
				content = <CodeMessage codeMessageOption={codeMessageOptionS} />;
			}
		} else {
			//其他弹窗
			content = (
				<div
					className="dialog-con"
					id="dialogEle"
					onClick={event => {
						this.contentClick(event);
					}}
				>
					{this.renderType(this.props.propsObj.dialog.type)}
				</div>
			);
		}

		return (
			<div
				className={bodyClass}
				id="dialogContent"
				onClick={this.backClick.bind(this)}
			>
				{content}
			</div>
		);
	}
}
export default Dialog;
